<template>
	<l-page :page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" @getList="getList">
		<el-form ref="queryForm" slot="header" :inline="true" :model="queryParams" label-width="75px">
			<el-form-item label="客服名称:" prop="username">
				<el-input v-model.trim="queryParams.username" clearable placeholder="请输入客服名称" @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item>
				<div class="flex items-center">
					<l-search @search="handleQuery" @refresh="resetQuery" />
					<el-button icon="el-icon-plus" type="primary" @click="handleAdd">新增</el-button>
				</div>
			</el-form-item>
		</el-form>

		<el-table v-loading="loading" :data="list" stripe>
			<el-table-column align="center" label="序号" type="index" width="55" />
			<el-table-column align="center" label="客服ID" prop="id" />
			<el-table-column align="center" label="客服账号" prop="username" />
			<LTableColumn
				type="switch"
				prop="status"
				label="客服状态"
				min-width="100"
				:switch-options="{
					activeText: '正常',
					activeValue: 0,
					inactiveText: '禁用',
					inactiveValue: 1,
				}"
				@change="statusChange($event.value, $event.row.id)"
			/>
			<el-table-column align="center" label="创建时间" prop="createTime" />
			<LTableColumn type="options" :width="tableAction">
				<template slot-scope="{ row }">
					<el-button type="primary" @click="handleEdit(row)">编辑</el-button>
					<el-button type="danger" @click="handleDelete(row)">删除 </el-button>
				</template>
			</LTableColumn>
		</el-table>
		<l-dialog
			v-model="openService"
			:title="serviceTitle"
			okButtonText="确认"
			width="500px"
			append-to-body
			@close="cancelService"
			@formClose="cancelService"
			@formSubmit="submitServiceForm"
		>
			<el-form ref="serviceForm" :model="serviceForm" :rules="serviceRules" label-width="100px">
				<el-form-item label="客服账号:" prop="username">
					<el-input v-model.trim="serviceForm.username" :disabled="serviceForm.id" placeholder="请输入客服账号" />
				</el-form-item>
				<el-form-item label="客服密码:" prop="password">
					<el-input v-model.trim="serviceForm.password" type="password" placeholder="请输入客服密码" />
				</el-form-item>
			</el-form>
		</l-dialog>
	</l-page>
</template>

<script>
import { cleanLogininfor, delLogininfor, exportLogininfor, list } from '@/api/monitor/logininfor';
import startEndTime from '@/components/StartEndTime';
import tableMixins from '@/mixins/table';
export default {
	name: 'Footslogging',
	components: { startEndTime },
	mixins: [tableMixins],
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 表格数据
			list: [],
			// 状态数据字典
			statusOptions: [],
			// 日期范围
			dateRange: [],
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				username: undefined,
			},
			// 新增客服弹窗
			openService: false,
			serviceForm: {},
			serviceTitle: '',
			serviceRules: {
				username: [{ required: true, message: '请输入客服账号', trigger: 'blur' }],
				password: [{ required: true, message: '请输入客服密码', trigger: 'blur' }]
			},
		};
	},
	created() {
		this.getList();
		this.getDicts('sys_common_status').then((response) => {
			this.statusOptions = response.data;
		});
	},
	methods: {
		/** 查询登录日志列表 */
		getList() {
			this.loading = true;
			this.$request.post('/mall/im/customer/list', this.queryParams).then((res) => {
				this.list = res.data.records;
				this.total = res.data.total;
				this.loading = false;
			});
		},

		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm');
			this.handleQuery();
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			this.$confirm(`是否确认删除客服账号${row.username}?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消'
			}).then(() => {
				this.$request.post('/mall/im/customer/remove', [row.id]).then(() => {
					this.getList();
					this.msgSuccess('删除成功');
				});
			})
				
		},
		/** 编辑按钮操作 */
		handleEdit(row) {
			this.serviceForm = row
			this.openService = true;
			this.serviceTitle = '编辑'
		},
		handleAdd() {
			this.serviceForm = {}
			this.openService = true;
			this.serviceTitle = '新增'
		},
		// 取消按钮
		cancelService() {
			this.openService = false;
			this.$refs['serviceForm'].resetFields();
		},
		statusChange(status, id) {
			this.$request.post('/mall/im/customer/edit', {
				id,
				status
			}).then(res => {

			})
		},
		/** 提交按钮 */
		submitServiceForm() {
			this.$refs['serviceForm'].validate((valid) => {
				if (valid) {
					if (this.serviceForm.id != null) {
						this.$request.post('/mall/im/customer/edit', this.serviceForm).then(res => {
							this.msgSuccess('编辑成功');
							this.openService = false;
							this.getList();
						})
					} else {
						this.$request.post('/mall/im/customer/add', this.serviceForm).then(res => {
							this.msgSuccess('新增成功');
							this.openService = false;
							this.getList();
						})
					}
					this.$refs['serviceForm'].resetFields();
				}
			});
		},
	},
};
</script>
